<!-- @format -->

<script setup>
	import axios from 'axios'
	import { ref } from 'vue'

	// 新闻列表
	const newsList = ref([])

	// 控制是否在加载中
	const isLoading = ref(false)

	getNewsData()

	// 获取新闻列表
	async function getNewsData() {
		// 请求前，把 isLoading 设置为加载中
		isLoading.value = true
		// 请求新闻数据
		const resp = await axios.get('http://localhost:4000/api/news')
		// 保存数据
		newsList.value = resp.data.data

		// 请求结束，把 isLoading 关闭加载状态
		isLoading.value = false
	}
</script>

<template>
	<div class="box">
		<ul v-loading="isLoading">
			<li
				v-for="item in newsList"
				:key="item.id"
				class="news">
				<div class="left">
					<div class="title">{{ item.title }}</div>
					<div class="info">
						<span>{{ item.source }}</span>
						<span>{{ item.time }}</span>
					</div>
				</div>
				<div class="right">
					<img
						:src="item.img"
						alt="img" />
				</div>
			</li>
		</ul>
	</div>
</template>

<style>
	.loading:before {
		z-index: 999;
		content: '';
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		background: #fff url('./assets/loading.gif') no-repeat center;
		background-size: auto;
	}

	.box {
		position: relative;
		width: 800px;
		min-height: 600px;
		margin: 10px auto;
		border-radius: 5px;
	}
	.news {
		display: flex;
		margin: 0 auto;
		padding: 20px 0;
		cursor: pointer;
	}
	.news .left {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		padding-right: 10px;
	}
	.news .left .title {
		font-size: 20px;
	}
	.news .left .info {
		color: #999999;
	}
	.news .left .info span {
		margin-right: 20px;
	}
	.news .right {
		width: 160px;
		height: 120px;
	}
	.news .right img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
</style>
